<template>
  <h1>Hello Vue3</h1>
  <h2>{{ obj }}</h2>
  <h3>age: {{ age }}</h3>
  <h3>name: {{ name }}</h3>
  <button @click="obj.age++">点击大一岁</button>
  <button @click="age += 2">点击大两岁</button>
</template>

<script>
/* 
  目标：
    toRef是函数，转换响应式对象中<某个>属性为单独响应式数据，并且值是关联的。
    toRefs是函数，转换响应式对象中<所有>属性为单独响应式数据，并且值是关联的。
*/
import { reactive, toRef, toRefs } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: '法外狂徒张三',
      age: 18,
      gender: '男',
    })

    // toRef是函数，转换响应式对象中<某个>属性为单独响应式数据，并且值是关联的。
    // const age = toRef(obj, 'age')
    // const name = toRef(obj, 'name')
    // const gender = toRef(obj, 'gender')
    
    // toRefs是函数，转换响应式对象中<所有>属性为单独响应式数据，并且值是关联的。
    // const { name, age } = toRefs(obj)
    // return { obj, name, age, gender }

    // 👍 toRefs 可配合 ... 展开运算符使用
    return {obj , ...toRefs(obj)}
  },
}
</script>

<style></style>
